import Taro from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, Button, Image } from '@tarojs/components'
import { AtAvatar, AtModal, AtModalAction, AtModalContent, AtModalHeader } from 'taro-ui'
import CList from '../../components/CList/index'

import CTopbar from '../../components/CTopBar/index'

import './index.scss'

import MyWallet from '@/assets/My/MyWallet.png'
import DistributionRecords from '@/assets/My/DistributionRecords.png'
import MyTeam from '@/assets/My/MyTeam.png'

import myTest from '@/assets/My/myTest.png'
import myCourses from '@/assets/My/myCourses.png'
import myConcerns from '@/assets/My/myConcerns.png'
import myCollection from '@/assets/My/myCollection.png'
import myAppointment from '@/assets/My/myAppointment.png'
import opinion from '@/assets/My/opinion.png'
import setting from '@/assets/My/setting.png'
import aboutUs from '@/assets/My/aboutUs.png'
import message from '@/assets/My/message.png'
import MyOrder from '@/assets/My/MyOrder.png'

import myCustomerService from '@/assets/My/myCustomerService.png'

import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import { edit_my_info, get_user_phone_api, upload_img_api } from './SetUp/service'
import { get_user_info } from './service'
/**
 * 我的界面
 */
type I = {
  user_info: any
  ShowAuth: boolean
  ShowAuthPhone: boolean
}
interface My {
  state: I
}
class My extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      user_info: {},
      ShowAuth: false,
      ShowAuthPhone: false,
    }
  }
  onPullDownRefresh() {
    // this.change()
    this.authUserInfo()
  }
  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    this.setState({
      user_info: Taro.getStorageSync('user_info') || '',
    })
    this.authUserInfo()
  }
  componentDidShow() {
    this.setState({
      user_info: Taro.getStorageSync('user_info') || '',
    })
  }
  authUserInfo = () => {
    const _that = this
    // 可以通过 Taro.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    Taro.getSetting({
      success: function (res) {
        if (!res.authSetting['scope.userInfo']) {
          console.log('不存在获取用户信息的授权')

          // 打开modal框
          _that.setState({
            ShowAuth: true,
          })
        } else {
          console.log('已经存在授权信息了')
        }
      },
    })
  }

  onCloseModal() {
    this.setState({
      ShowAuth: false,
    })
  }
  onCloseGetUserInfoModal() {
    this.setState({
      ShowAuthPhone: false,
    })
  }
  onGetUserInfo(e) {
    console.log(e.detail.userInfo)
    this.setState({
      ShowAuth: false,
      ShowAuthPhone: true,
    })
    if (e.detail.userInfo) {
      this.setState(
        {
          user_info: e.detail.userInfo,
        },
        async () => {
          Taro.setStorage({
            key: 'user_info',
            data: e.detail.userInfo,
          })
          const params = {
            nickName: e.detail.userInfo.nickName,
            userName: e.detail.userInfo.nickName,
            url: e.detail.userInfo.avatarUrl,
          }
          await edit_my_info(params).then(({ result, data }) => {
            if (result === 1999) {
              console.log('用户信息发送给后台成功')
              get_user_info().then((infoObj) => {
                this.setState({
                  user_info: infoObj.data,
                })
                Taro.setStorage({
                  key: 'user_info',
                  data: infoObj.data,
                })
              })
            }
          })
        },
      )
      this.onCloseModal()
    } else {
      this.onCloseModal()
    }
  }

  getPhoneNumber(e) {
    console.log(e)
    this.setState(
      {
        ShowAuthPhone: false,
      },
      () => {
        const params = {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv,
        }
        get_user_phone_api(params).then(({ result, data }) => {
          if (result === 1999) {
            console.log('手机号已经发送给后端！')
          }
        })
      },
    )
  }

  // 点击登录账户触发函数
  change = () => {}

  render() {
    const { user_info, ShowAuth, ShowAuthPhone } = this.state
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的'></CTopbar>
        </View>
        <View className='my'>
          <View className='header_2'>
            <View className='at-row at-row__align--center'>
              <View className='at-col at-col-1 at-col--auto'>
                <AtAvatar size='large' circle image={user_info ? user_info.avatarUrl : ''}></AtAvatar>
              </View>
              {user_info ? (
                <View className='at-col pName'>{user_info ? user_info.nickName : ''}</View>
              ) : (
                <View className='at-col pName' onClick={this.change}>
                  点击登录账户
                </View>
              )}
            </View>
          </View>
          <View className='main'>
            {/* <View className='my_app_distribution'>
              <Text className='my_app_text'>我的账本</Text>
              <View className='my_app_line'></View>
              <View className='my_app_content'>
                <View
                  className='distribution_content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyWallet/index',
                    })
                  }}
                >
                  <Image src={MyWallet} />
                  <Text>钱包</Text>
                </View>
                <View
                  className='distribution_content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyTeam/index',
                    })
                  }}
                >
                  <Image src={MyTeam} />
                  <Text>我的团队</Text>
                </View>
                <View
                  className='distribution_content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/DistributionRecords/index',
                    })
                  }}
                >
                  <Image src={DistributionRecords} />
                  <Text>分销记录</Text>
                </View>
              </View>
            </View> */}
            <View className='my_app_wrapper'>
              <Text className='my_app_text'>我的应用</Text>
              <View className='my_app_line'></View>
              <View className='my_app_content'>
                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyEvaluation/index',
                    })
                  }}
                >
                  <Image src={myTest} />
                  <Text>我的测评</Text>
                </View>
                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyCourses/index',
                    })
                  }}
                >
                  <Image src={myCourses} />
                  <Text>我的课程</Text>
                </View>
                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyReservation/index',
                    })
                  }}
                >
                  <Image src={myAppointment} />
                  <Text>我的预约</Text>
                </View>
                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyCollect/index',
                    })
                  }}
                >
                  <Image src={myCollection} />
                  <Text>我的收藏</Text>
                </View>

                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyAttention/index',
                    })
                  }}
                >
                  <Image src={myConcerns} />
                  <Text>我的关注</Text>
                </View>
                <View className='content_item'>
                  <Button openType='contact'>
                    <Image src={myCustomerService} />
                  </Button>
                  <Text>我的客服</Text>
                </View>
                <View
                  className='content_item'
                  onClick={() => {
                    Taro.navigateTo({
                      url: '/pages/My/MyOrder/index',
                    })
                  }}
                >
                  <Image src={MyOrder} />
                  <Text>我的订单</Text>
                </View>
              </View>
            </View>

            <View className='my_service_list'>
              <View
                className='wrapper'
                onClick={() => {
                  Taro.navigateTo({
                    url: '/pages/My/AboutUs/index',
                  })
                }}
              >
                <CList hasBorder={false} title='关于我们' isarrow imgSrc={aboutUs}></CList>
              </View>
              {/* <View
                className='wrapper'
                onClick={() => {
                  Taro.navigateTo({
                    url: '/pages/My/MyCustomer/index',
                  })
                }}
              >
                <CList hasBorder={false} title='消息中心' isarrow imgSrc={message}></CList>
              </View> */}
              <View
                className='wrapper'
                onClick={() => {
                  Taro.navigateTo({
                    url: '/pages/My/Feedback/index',
                  })
                }}
              >
                <CList hasBorder={false} title='意见反馈' isarrow imgSrc={opinion}></CList>
              </View>
              <View
                className='wrapper'
                onClick={() => {
                  Taro.navigateTo({
                    url: '/pages/My/SetUp/index',
                  })
                }}
              >
                <CList hasBorder={false} title='设置' isarrow imgSrc={setting}></CList>
              </View>
            </View>
          </View>

          <AtModal isOpened={ShowAuth}>
            <AtModalHeader>授权提醒</AtModalHeader>
            <AtModalContent>即将获取您头像、昵称、地区等用户信息</AtModalContent>
            <AtModalAction>
              <Button onClick={this.onCloseModal.bind(this)}>取消</Button>
              <Button open-type='getUserInfo' onGetUserInfo={this.onGetUserInfo.bind(this)}>
                授权
              </Button>
            </AtModalAction>
          </AtModal>
          <AtModal isOpened={ShowAuthPhone}>
            <AtModalHeader>授权提醒</AtModalHeader>
            <AtModalContent>即将获取您的手机号</AtModalContent>
            <AtModalAction>
              <Button onClick={this.onCloseGetUserInfoModal.bind(this)}>取消</Button>
              <Button open-type='getPhoneNumber' onGetPhoneNumber={this.getPhoneNumber.bind(this)}>
                授权
              </Button>
            </AtModalAction>
          </AtModal>
        </View>
      </View>
    )
  }
}

export default My
